<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

    <header>
        <div class="navBar">
            <div class="titleLeft">
                <a href="#" class="titleLink">
                    开课吧首页
                </a>
                <a href="#" class="titleLink">
                    创业微学院
                </a>
                <a href="#" class="titleLink">
                    摄影微学院
                </a>
                <a href="#" class="titleLink">
                    微聚
                </a>
                <a href="#" class="titleLink">
                    论坛
                </a>
            </div>
            <div class="titleRight">
                <a href="#" class="titleLink">登录/注册</a>
                <a href="#" class="titleLink">播放记录</a>
                <a href="#" class="titleLink">APP下载</a>
            </div>
        </div>
        </div>
    </header>

    <nav class="sub-nav">
        <div class="titleLeft">
            <a href="#" class="titleLink2">
                <span style="font-size:30px">摄影</span>
                <span style="font-size:20px">开课吧</span>
            </a>
        </div>
        <a href="#">个人中心</a>
        <a href="#">视频播放</a>
        
        </div>
    </nav>
    <div class="container">
        <!-- 用户信息 -->
        <div class="user-info">
            <img src="https://picsum.photos/80/80?random=1" alt="用户头像">
            <p>nosay</p>
            <p>视频: 34 | 订阅粉丝: 30112</p>
        </div>
        <div class="tab-nav">
            <a href="#" class="active">个人中心</a>
            <a href="#">播放记录</a>
            <a href="#">我的收藏</a>
            <a href="#">我的订阅</a>
            <a href="#">我的视频</a>
        </div>
        <div class="section-title">最近播放视频</div>
        <div class="grid">
            <div class="grid-item"><img src="https://picsum.photos/200/150?random=2" alt="视频1"></div>
            <div class="grid-item"><img src="https://picsum.photos/200/150?random=3" alt="视频2"></div>
            <div class="grid-item"><img src="https://picsum.photos/200/150?random=4" alt="视频3"></div>
            <div class="grid-item"><img src="https://picsum.photos/200/150?random=5" alt="视频4"></div>
            <div class="grid-item"><img src="https://picsum.photos/200/150?random=6" alt="视频5"></div>
            <div class="grid-item"><img src="https://picsum.photos/200/150?random=7" alt="视频6"></div>
        </div>

        <!-- 右侧订阅列表 -->
        <div class="sidebar">
            <h3>共订阅了8个人</h3>
            <ul class="subscribe-list">
                <li><img src="https://picsum.photos/30/30?random=8" alt="头像"><span>nosay 视频:34 | 订阅粉丝:11298</span></li>
                <li><img src="https://picsum.photos/30/30?random=9" alt="头像"><span>nosay 视频:34 | 订阅粉丝:11298</span></li>
                <li><img src="https://picsum.photos/30/30?random=10" alt="头像"><span>nosay 视频:34 | 订阅粉丝:11298</span></li>
                <li><img src="https://picsum.photos/30/30?random=11" alt="头像"><span>nosay 视频:34 | 订阅粉丝:11298</span></li>
                <li><img src="https://picsum.photos/30/30?random=12" alt="头像"><span>nosay 视频:34 | 订阅粉丝:11298</span></li>
            </ul>
            <a href="#" class="manage-btn">查看更多</a>
        </div>

        <div class="section-title" style="margin-top: 40px;">最近播放视频</div>
        <div class="grid">
            <div class="grid-item"><img src="https://picsum.photos/200/150?random=13" alt="视频7"></div>
            <div class="grid-item"><img src="https://picsum.photos/200/150?random=14" alt="视频8"></div>
            <div class="grid-item"><img src="https://picsum.photos/200/150?random=15" alt="视频9"></div>
            <div class="grid-item"><img src="https://picsum.photos/200/150?random=16" alt="视频10"></div>
            <div class="grid-item"><img src="https://picsum.photos/200/150?random=17" alt="视频11"></div>
            <div class="grid-item"><img src="https://picsum.photos/200/150?random=18" alt="视频12"></div>
        </div>
    </div>
</body>
<style>
     @import url("person.css")
</style>
</html>
